<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逛好店</title>
    <!-- 使用引入链接方式处理样式 -->
    <link rel="stylesheet" href="lab3-4.css">
</head>
<body>
    <!-- 修复HTML结构：使用div替代span，正确嵌套块级元素 -->
    <div class="title-container">
        <h1>逛好店</h1>
        <!-- 箭头容器：实现空心红箭头和悬停效果 -->
        <div class="arrow-container">
            <div class="arrow-normal"></div>
            <div class="arrow-hover"></div>
        </div>
    </div>
    
    <!-- 店铺卡片1：使用div正确结构 -->
    <div class="shop-card shop-1">
        <div class="shop-info">
            <p class="shop-name">贝恩施京东自营官方旗舰店</p>
            <span class="self-tag">自营</span>
            <p class="followers">277.9万人关注</p>
        </div>
        <div class="shop-image">
            <img src="lab3-4-1.jpg" alt="贝恩施京东自营官方旗舰店">
        </div>
    </div>
    
    <!-- 店铺卡片2：使用div正确结构 -->
    <div class="shop-card shop-2">
        <div class="shop-info">
            <p class="shop-name">美宝莲京东自营官方旗舰店</p>
            <span class="self-tag">自营</span>
            <p class="followers">192.9万人关注</p>
        </div>
        <div class="shop-image">
            <img src="lab3-4-2.jpg" alt="美宝莲京东自营官方旗舰店">
        </div>
    </div>
</body>
</html>